<script setup lang="ts">
/*
  父传子
  vue3
    <xxx  :num="appNum" />
    xxx.vue
   const props= defineProps({
      num:{
        type:Number, 
        required:true,
        default:默认值,
        validator:(value)=>{
          return boolean 
        }
        ...
      }
    })
    html:  {{num}}
    js:props.num
 vue3+ts
   <xxx  :num="appNum" />
   const props= defineProps<{
    num?:0 | 1
   }>()
   默认值 withDefaults(defineProps,{属性名:默认值}) 

    html:  {{num}}
    js:props.num


子传父
   vue3+js
     <HmSon  @方法名="父组件方法"   />
     HmSon.vue
       const emits=defineEmits(['方法名'])
       emits('方法名',实参值)
   vue3+ts
     <HmSon  @方法名="父组件方法"   />
     HmSon.vue
       const emits=defineEmits<{
        (e:'方法名',x:实参的类型):返回值类型
       }>() 



*/
// import { ref } from 'vue'
import { ref } from 'vue'
import HmSon from './components/HmSon.vue'
const appNum = ref(999)
const gender = ref<0 | 1>(0)
const setNum = (value: number) => {
  appNum.value = value
}
</script>

<template>
  <div class="home-page">
    <h3>我是父组件</h3>
    <hr />
    <HmSon @sonSetNum="setNum" :num="appNum" :gender="gender"></HmSon>
  </div>
</template>

<style lang="scss" scoped></style>
